import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  const MyGridView({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView(
      // 固定列数
      // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      //   // 列数
      //   crossAxisCount: 3,
      //   // 垂直方向间距
      //   mainAxisSpacing: 20,
      //   // 水平方向间距
      //   crossAxisSpacing: 10,
      //   childAspectRatio: 4 / 3,
      // ),

      // 最大宽度
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        // 单个子组件的最大宽度
        maxCrossAxisExtent: 150,
        // 垂直方向间距
        mainAxisSpacing: 20,
        // 水平方向间距
        crossAxisSpacing: 10,
        childAspectRatio: 4 / 3,
      ),
      children: [
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
        Container(color: Colors.yellow),
        Container(color: Colors.purple),
        Container(color: Colors.orange),
        Container(color: Colors.pink),
        Container(color: Colors.brown),
        Container(color: Colors.teal),
        Container(color: Colors.cyan),
        Container(color: Colors.lightBlue),
        Container(color: Colors.lightGreen),
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
        Container(color: Colors.yellow),
        Container(color: Colors.purple),
        Container(color: Colors.orange),
        Container(color: Colors.pink),
        Container(color: Colors.brown),
        Container(color: Colors.teal),
        Container(color: Colors.cyan),
        Container(color: Colors.lightBlue),
        Container(color: Colors.lightGreen),
      ],
    );
  }
}
